<template>
	<view>
		<view v-if="swiperList.length>0" class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
			<view @click="gotodetail(index)" class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList"
			 :key="index" :style="[{'--index': item.zIndex,'--left':item.mLeft}]" :data-direction="direction">
				<view :class="['swiper-item',item.zIndex==3?'boxshow':'']">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			swiperList: {
				type: Array,
				default () {
					return []	
				}
			}
		},
		data() {
			return {
				//swiperList:,
				cardCur: 0,
				dotStyle: false,
				towerStart: 0,
				direction: '', //滚动位置，左或右
				autotime: '',
				overtime: 0, //超时自动滚动 数字为5代表5秒未操作
			}
		},
		created() {
			this.continueswpier()
		},
		watch: {
			swiperList() {
				console.log('更改数据')
				clearInterval(this.autotime)
				this.autotime = ''
				this.overtime = 0
				this.TowerSwiper('swiperList');
			}
		},
		methods: {
			// 初始化towerSwiper
			TowerSwiper(name) {
				//console.log(this['swiperList'], 2222, name)
				let list = this[name];
				console.log(list)
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				//console.log(list)
				this.swiperList = list
				setTimeout(() => {
					this.autoplay()
				}, 1500)
			},
			//自动播放每3秒滚动一次
			autoplay() {
				if (this.swiperList.length > 0) {
					this.autotime = setInterval(() => {
						this.direction = 'left'
						this.TowerEnd()
					}, 3000)
				}
			},
			//是否需要继续执行轮播动画
			continueswpier() {
				//如果超时10未操作则执行操作
				let continuetime = setInterval(() => {
					if (this.overtime > 5 && !this.autotime) {
						console.log('执行一次了')
						this.autoplay()
					}
					this.overtime++
				}, 1000)

			},
			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
				clearInterval(this.autotime)
				this.autotime = ''
				this.overtime = 0
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
					//console.log(1)
				} else {
					//console.log(2)
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},

			//跳转详情
			gotodetail(index) {
				console.log(index)
				let item = this.swiperList[index]
				console.log(item)
				uni.navigateTo({
					url: item.url
				})
			}
		}
	}
</script>

<style>
	@import "./css/main.css";

	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}

	.tower-swiper .tower-item .boxshow {
		box-shadow: 5rpx 20rpx 20rpx #959595;
	}
</style>
